<!-- 前台页面 header 组件 -->
<template>
  <div class="walletHeaderWrapper">

    <!-- PC 端 -->
    <div class="walletHeader">

      <!-- logo -->
      <div class="logo" @click="goToIndex">
        <img class="logoImg" :src="walletLogo" alt="BlockWatch Logo" title="BlockWatch">
      </div>

      <!-- 头部导航栏 -->
      <ul class="nav">
        <li @click="goToIndex" :class="route.name == 'index' ? 'active' : ''">
          <a href="javascript:;">
            {{ $t('home.Main') }}
          </a>
        </li>
        <li @click="goToProduct" :class="route.name == 'product' ? 'active' : ''">
          <a href="javascript:;">
            {{ $t('home.Products') }}
          </a>
        </li>
        <li @click="goToDeveloperCenter" :class="route.name == 'developerCenter' ? 'active' : ''">
          <a href="javascript:;">
            {{ $t('home.DeveloperCenter') }}
          </a>
        </li>
        <!-- <li>
          <a href="javascript:;">
            {{ $t('home.Download') }}
          </a>
        </li> -->
        <li>
          <a href="javascript:;">
            {{ $t('home.HelpCenter') }}
          </a>
        </li>
      </ul>

      <!-- 登录/注册 / user -->
      <div class="ifLogin">

        <!-- 如果已经登录，有用户信息 -->
        <div v-if="userStore.getToken" class="user">
          <el-dropdown trigger="click" placement="bottom" size="large">
            <img src='@/assets/images/usdt.png' alt="" style="width: 0.4rem; vertical-align: middle;">
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goToDashBoard">
                  {{ $t('title.Dashboard') }}
                </el-dropdown-item>
                <el-dropdown-item @click="logOut">
                  {{ $t('global.LoginOut') }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

        <!-- 如果没有登录，没有用户信息 -->
        <div v-else>
          <!-- 登录注册组件 -->
          <loginAndRegister></loginAndRegister>
        </div>

      </div>

      <!-- 切换语言 -->
      <changeLanguage class="changeLanguage"></changeLanguage>

    </div>

    <!-- h5 移动端 -->
    <div class="walletHeaderH5">

      <!-- logo -->
      <div class="logo" @click="goToIndex">
        <img class="logoImg" :src="walletLogo" alt="ChainLink Wallet Logo" title="ChainLink Wallet">
      </div>

      <!-- 切换语言 -->
      <changeLanguage class="changeLanguage"></changeLanguage>

      <!-- 默认隐藏导航栏 -->
      <div class="menuBtn">
        <el-dropdown trigger="click" placement="bottom" size="large">
          <el-icon size="30">
            <Operation />
          </el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goToIndex">
                {{ $t('home.Main') }}
              </el-dropdown-item>
              <el-dropdown-item @click="goToProduct">
                {{ $t('home.Products') }}
              </el-dropdown-item>
              <el-dropdown-item @click="goToDeveloperCenter">
                {{ $t('home.DeveloperCenter') }}
              </el-dropdown-item>
              <el-dropdown-item>
                {{ $t('home.Download') }}
              </el-dropdown-item>
              <el-dropdown-item>
                {{ $t('home.HelpCenter') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

    </div>

  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "@/stores";
import { Operation } from "@element-plus/icons-vue";
// 导入切换语言组件，国际化
import changeLanguage from '@/components/common/changeLanguage.vue';
// 导入图片，img 标签可以动态使用
import { walletLogo } from "@/utils/imgUrl.js";
// 导入登录注册组件
import loginAndRegister from '@/components/common/loginAndRegister.vue';

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();

/* -------------------- 路由相关方法 start -------------------- */
// goToIndex 跳转首页
const goToIndex = () => {
  router.push({
    name: "index",
  });
};

// goToProduct 跳转产品页
const goToProduct = () => {
  router.push({
    name: "product",
  });
};

// goToDeveloperCenter 跳转开发者中心页
const goToDeveloperCenter = () => {
  router.push({
    name: "developerCenter",
  });
};

// goToDashBoard 跳转控制台页
const goToDashBoard = () => {
  router.push({
    name: 'dashboard',
  });
};
/* -------------------- 路由相关方法 end -------------------- */

// 退出登录方法
const logOut = () => {
  userStore.clear()
  // router.replace('/login');
};

</script>

<style lang="less" scoped>
@font-color-white: #fff;
@font-color-black: #000;

/*
  默认的通用样式，应该写在 App.vue -- start
*/
* {
  margin: 0;
  padding: 0;
}

a {
  color: @font-color-black;
  text-decoration: none;
}

li {
  list-style: none;
}

/*
  默认的通用样式，应该写在 App.vue -- end
*/

/* ---------- 钱包头部组件 ---------- */
.walletHeaderWrapper {
  border-bottom: 1px solid #eee;
  background: #fff;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;

  .walletHeader {
    //width: 10.24rem;
    width: 100%;
    height: 0.8rem;
    margin: 0 auto;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    /* ----- logo ----- */
    .logo {
      cursor: pointer;
      margin-right: 30px;

      .logoImg {
        width: 2rem;
      }

    }

    /* ----- 头部导航栏 ----- */
    .nav {
      display: flex;

      li {
        height: 0.4rem;
        line-height: 0.4rem;
        display: inline-block;
        margin-left: 0.3rem;
        margin-right: 0.3rem;

        a {
          font-size: 0.16rem;
          color: #666;
        }

      }

      li.active {
        border-bottom: 2px solid @font-color-black;
      }

      li:hover {
        border-bottom: 2px solid @font-color-black;

        a {
          color: @font-color-black;
        }
      }

    }

    /* ----- 登录/注册 / user ----- */
    .ifLogin {

      .user {
        cursor: pointer;
      }

    }

    /* ----- 切换语言 ----- */
    .changeLanguage {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 9;
    }

  }

  .walletHeaderH5 {
    display: none;
  }

}

/* h5 适配样式：当视口宽度小于 600px 时 */
@media (max-width: 600px) {
  .walletHeaderWrapper {
    width: 100%;
    margin: 0 auto;

    .walletHeader {
      display: none;
    }

    .walletHeaderH5 {
      width: 100%;
      height: 0.8rem;
      margin: 0 auto;

      display: flex;
      justify-content: space-between;
      align-items: center;

      position: relative;

      /* ---------- logo ---------- */
      .logo {
        cursor: pointer;

        .logoImg {
          width: 2rem;
        }

      }

      .changeLanguage {
        width: 0.35rem;
        height: 0.35rem;

        position: absolute;
        top: 0.2rem;
        right: 0.6rem;
      }

      /* ---------- 导航栏 ---------- */
      .menuBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 10px;
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
      }

      .menuBtn:hover {
        background: #ecf5ff;
      }

      .menuBtn:active {
        background: #b2e6ff;
      }

      .el-dropdown-menu--large {
        padding: 7px 0;
      }

    }


  }
}
</style>